<template>
    <div class="state">
        <Header title="住户管理" >
            <img class="left" @click="back" src="../assets/turn.png" alt="">
        </Header>
        <div class="box_wrapper">
            <div :class="item.state === 'D' ? 'hidden' : 'box_state'" v-for="(item,index) in list" :key="index" @click="tips(item.state,item.id,item.mobile)">
                <img v-if="item.state === 'N'" :src="icon_gray">
                <img v-else :src="icon_blue">
                <div class="box_man">
                    <div class="box_flex">
                        <p>{{item.userName}}</p>
                        <p class="box_last">{{item.mobile}}</p>
                    </div>
                    <p class="box_top">状态：<span>{{item.state === 'N' ? Enable : black }}</span></p>
                </div>
                <p class="box_edit">编辑</p>
                <mt-actionsheet :actions="actions" v-model="sheetVisible"></mt-actionsheet>
                <mt-actionsheet :actions="close" v-model="flag"></mt-actionsheet>
            </div>
        </div>
        
    </div>
</template>

<script>
import Header from './header'
import { state } from '../old_request'
import { Toast, Actionsheet } from "mint-ui";
import { unfold, Prohibit,cutoff } from '../old_request'
export default {
    data(){
        return {
            list:[],
            icon_gray:require('../assets/icon_user_gray.png'),
            icon_blue:require('../assets/icon_user_blue.png'),
            sheetVisible:false,
            flag:false,
            Enable:'已启用',
            black:'已禁用',
            userId:null,
            mobile:null,
            actions:[
                {
                    name:'启用',
                    method:this.open
                },
                {
                    name:'删除',
                    method:this.detle
                }
            ],
            close:[
                {
                    name:'禁用',
                    method:this.close_open
                },
                {
                    name:'删除',
                    method:this.close_detle
                }
            ]
        }
    },
    components:{
        Header
    },
    methods:{
        back(){
            this.$router.back();
        },
        tips(state,unitId,mobile){
            let that = this;
            if(state === 'N'){                  //开启时执行
                that.flag = true;
                that.userId = unitId;
                that.mobile = mobile;
            }else{                              //禁用，删除时执行
                that.sheetVisible = true;
                that.userId = unitId;
                that.mobile = mobile;
            }
            
        },
        ergodic(peg){           
            let that = this;
            that.list.map( (item,index) => {                      //数据驱动 只要改变数据dom就会自动同步
                if(that.list[index].id === that.userId)
                    that.list[index].state = peg;
            })
            // console.log(that.list)
        },
        open(){                                 //开启住户开门权限
            let that = this;
            let data = {
                "sign":that.$md5(`${that.wrapper.globalData()}id=${that.userId}timestamp=${that.wrapper.gettime()}`),
                "timestamp":that.wrapper.gettime(),
                "id":that.userId,
                "mobile":that.mobile,
                "userId":that.$store.state.userid,
                "state":'N'
            }
            unfold(data,that).then( (res) => {
                //console.log(res)
                if(res.code === 0){
                    Toast({
                        message: "开启成功",
                        iconClass: "iconfont icon-success_no_circle",
                        duration: 1500
                    });
                    that.ergodic('N');              //改变住户状态
                }
            })
        },
        detle(){                                        //开启状态下的 删除住户
            let that = this;
            let data = {
                "sign":that.$md5(`${that.wrapper.globalData()}id=${that.userId}timestamp=${that.wrapper.gettime()}`),
                "timestamp":that.wrapper.gettime(),
                "id":that.userId,
                "mobile":that.mobile,
                "userId":that.$store.state.userid,
                "state":'D'
            }
            cutoff(data,that).then( (res) => {
                console.log(res)
                if(res.code === 0){
                    Toast({
                        message: "删除成功",
                        iconClass: "iconfont icon-success_no_circle",
                        duration: 1500
                    });
                    that.ergodic('D');
                }
            })
        },
        close_open(){                               //禁用住户开门权限
            let that = this;
            console.log(that.mobile)
            let data = {
                "sign":that.$md5(`${that.wrapper.globalData()}id=${that.userId}timestamp=${that.wrapper.gettime()}`),
                "timestamp":that.wrapper.gettime(),
                "id":that.userId,
                "mobile":that.mobile,
                "userId":that.$store.state.userid,
                "state":'H'
            }
            Prohibit(data,that).then( (res) => {
                //console.log(res)
                if(res.code === 0){
                    Toast({
                        message: "禁用成功",
                        iconClass: "iconfont icon-success_no_circle",
                        duration: 1500
                    });
                    that.ergodic('H');
                }
            })
        },
        close_detle(){                              //禁用状态下的 删除住户
            let that = this;
            let data = {
                "sign":that.$md5(`${that.wrapper.globalData()}id=${that.userId}timestamp=${that.wrapper.gettime()}`),
                "timestamp":that.wrapper.gettime(),
                "id":that.userId,
                "mobile":that.mobile,
                "userId":that.$store.state.userid,
                "state":'D'
            }
            cutoff(data,that).then( (res) => {
                console.log(res)
                if(res.code === 0){
                    Toast({
                        message: "删除成功",
                        iconClass: "iconfont icon-success_no_circle",
                        duration: 1500
                    });
                    that.ergodic('D');
                }
            })
        }
    },
    created(){
        let that = this;
        if(that.$store.state.blockid === null){
            that.wrapper.displace(that.$store.state.blockid,'login','item',that);
        }
        let data = {
            "sign":that.$md5(`${that.wrapper.globalData()}timestamp=${that.wrapper.gettime()}unitId=${that.$route.params.unitid}`),
            "timestamp":that.wrapper.gettime(),
            "unitId":that.$route.params.unitid,
            "userId":that.$store.state.userid,
            "mobile":that.wrapper.getlocalstoage('mobile')
        }
        state(data,that).then( (res) => {
            // console.log(res)
            if(res.code === 0){
                that.list = res.data;
            }
        })
    }
}
</script>

<style scoped>
    .state{
        margin-top: 50px;
        padding: 5px 0;
        background: #EFEFF4;
        position: absolute;
        right: 0;
        left: 0;
        top: 0;
        bottom: 0;
    }
    .left{
        position: absolute;
        left: -6px;
        transform: translateY(1px) !important;
        height: 22px !important;
    }
    .box_wrapper{
        margin: 10px 0px;
    }
    .box_state{
        display: flex;
        width: 95%;
        height: 70px;
        margin: 10px auto;
        padding: 10px;
        box-sizing: border-box;
        background: white;
        border-radius:3px;
    }
    .box_state img{
        height: 40px;
        transform: translateY(7px);
    }
    .box_state .box_man{
        flex: 1;
        padding:8px 0 0 14px;
    }
    .box_flex{
        display: flex;
    }
    .box_flex .box_last{
        padding-left: 25px;
    }
    .box_man .box_top{
        padding-top: 8px;
        font-size: 13px;
        color: #C20000;
    }
    .box_state .box_edit{
        width: 55px;
        height: 25px;
        line-height: 25px;
        color: white;
        text-align: center;
        font-size: 12px;
        border-radius: 50px;
        margin-top: 15px;
        background:rgb(0,173,255);

    }
    .hidden{
        display: none;
    }
</style>